<template>
  <section class="todoapp">
    <HeaderCom @addlist="addlist"></HeaderCom>
    <BodyCom :list="list" @dellist="dellist" @selectall="selectall"></BodyCom>
    <FooterCom
      :count="count"
      @delsubmit="delsubmit"
      :type="type"
      @changeall="changeall"
      @changesuc="changesuc"
      @changefor="changefor"
    ></FooterCom>
  </section>
</template>

<script>
import HeaderCom from './components/HeaderCom.vue'
import BodyCom from './components/BodyCom.vue'
import FooterCom from './components/FooterCom.vue'
export default {
  components: {
    HeaderCom,
    BodyCom,
    FooterCom
  },
  data() {
    return {
      list: [
        {
          id: 1,
          value: '读万卷书',
          flag: true
        },
        {
          id: 2,
          value: '行万里路',
          flag: false
        }
      ],
      type: 'all'
    }
  },
  methods: {
    addlist(value) {
      this.list = [
        ...this.list,
        {
          id: +new Date(),
          value,
          flag: false
        }
      ]
    },
    dellist(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    delsubmit() {
      this.list = this.list.filter(item => !item.flag)
    },
    changeall() {
      this.list = this.list.filter(item => item.id)
    },
    changefor() {
      this.list = this.list.filter(item => !item.flag)
    },
    changesuc() {
      this.list = this.list.forEach(item => item.flag)
    },
    selectall() {
      this.list.filter(item => (item.flag = true))
    }
  },
  computed: {
    count() {
      return this.list.filter(item => !item.flag).length
    }
  }
}
</script>

<style></style>
